<template>
	<view class="main">
		<div class="loading" v-if="loading">
			<u-loading :show="loading" mode="flower" size="60"></u-loading>
		</div>
		<view v-if="cous.name !=''  && loading==false">
			<view class="posr">
				<u-image :src="cous.image" width="100%" height="288rpx" border-radius="20">
					<u-loading slot="loading"></u-loading>
				</u-image>
				<view class="content box box-pack-between box-align-center padd20">
					<view style="padding: 0 30rpx;">
						<view class="title">
							{{cous.name}}
						</view>
						<view class="zb">
							主编：{{cous.material}}
						</view>
					</view>
				</view>
				<view class="cont-detail" @click="show =!show">
					详情
				</view>
			</view>
			<view class="course-cont">
				<view class="cont-top box box-tb box-pack-start">
					<view class="tabbar active">
						课程学习 (共{{stageList.length}}章)
						<view class="fenxiang" @click="showfx" v-if="showfxbtn"> 分享 </view>
					</view>
				</view>
				<div style="height: 480px;overflow: scroll;">
					<u-collapse :item-style="itemStyle">
						<u-collapse-item :title="`第${stage.num}章   ${stage.title}`" v-for="(stage, indexs) in stageList"
							:key="indexs">
							<view class="">
								<view class="box box-tb" v-for="(item, ind) in stage.sectionList" :key="ind">
									<view class="box box-align-center box-pack-between slot-title">
										<view class="box box-align-center box-pack-start list"
											@click="goDetail(item,ind)">
											<view class="ml5 number" v-if="item.num <= 9">
												{{`0${item.num}`}}
											</view>
											<view class="ml5 number" v-else>
												{{`${item.num}`}}
											</view>
											<view class="box box-tb box-align-start box-pack-center ml10 context">
												<view class="times box box-align-start" style="font-size: 28rpx;">
													{{item.title}}
												</view>
												<view class="box box-align-center box-pack-start"
													v-if="item.time !=null">
													<u-image src="@/static/home/icon_mp4.png" width="31rpx"
														height="31rpx">
														<u-loading slot="loading"></u-loading>
													</u-image>
													<view style="font-size: 26rpx;color: #888F9E;" class="ml5 mt5">
														{{item.time}}
													</view>
												</view>
											</view>
										</view>
										<view class="box box-align-center box-pack-end" style="font-size: 24rpx;"
											@click.stop>
											<view class="percents ml10"
												@click="showComplete(item,stage.couslistid,stage.cousid)">
												学习人数：{{item.wcrs}}</view>
										</view>
									</view>
								</view>
							</view>

						</u-collapse-item>
					</u-collapse>
				</div>
			</view>
			<no-data style="margin-top: 0 !important;" title="暂无课程任务" v-if="cous.name==''"></no-data>
			<u-popup v-model="show" mode="bottom" border-radius="20" length="75%">
				<view class="content">
					<view class="tips active">
						课程详情
					</view>
					<view style="padding: 33rpx 52rpx;">
						<u-parse :html="cous.info" :selectable="true" :use-cache="true"></u-parse>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- <no-data title="暂无课程任务" v-if="cous.name==''"></no-data> -->


		<u-popup v-model="showfenxiang" mode="bottom" border-radius="8" length="45%">
			<view>
				<u-field v-model="fxtitle" label="标题" placeholder="请填写标题"></u-field>
				<u-field v-model="title" label="选择图片" disabled="true" :customStyle="uploadimg"> </u-field>
				<view class="updimg">
					<u-upload :action="action" :file-list="fl" max-count="1" @on-uploaded="onuploaded"></u-upload>
				</view>
			</view>
			<view>
				<u-button open-type="share" type="primary">确定</u-button>
			</view>
		</u-popup>
		<u-popup v-model="showlogin" mode="bottom" length="50px">
			<view class="loginpop" @click="goindex">
				请登录/注册
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showlogin: false,
				action: this.$api.baseUrl + '/comm/uploadfile',
				fl: [],
				surebtnStyle: {
					width: '70%'
				},
				showfenxiang: false,
				listHeight: '100rpx',
				user: uni.getStorageSync("user"),
				stageList: [],
				cous: {
					image: '',
					name: '',
					material: ''
				},
				show: false,
				loading: true,
				fxtitle: '',
				fximg: 'https://yh-sys.oss-cn-beijing.aliyuncs.com/2AA82D3CF32F47D0BBFBC6037E73D503join.png?Expires=4792987242&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=skoxCO1pZ1kn3DJIiBTnGM%2FO2oY%3D',
				showfxbtn: false, //是否显示分享按钮
				schoolid: ''
			}
		},
		onShareAppMessage(res) {
			wx.vibrateShort();
			return {
				title: this.fxtitle,
				path: '/team/kc/kcView?schoolid=' + this.schoolid,
				imageUrl: this.fximg
			}
		},
		onLoad(opt) {
			console.log(opt);
			if (opt.schoolid == undefined) {
				this.schoolid = this.user.schoolId;
			} else {
				this.schoolid = opt.schoolid;
			}
			if (this.user != null && this.user != '') {
				this.showfxbtn = true;
			} else {
				this.showlogin = true;
			}
			this.getKcrwInfo();
		},
		methods: {
			goindex() {
				wx.vibrateShort();
				uni.navigateTo({
					url: '../../pages/index/index'
				})
			},
			//上传图片
			onuploaded(lists, name) {
				this.fximg = lists[0].response.url;
			},
			showfx() {
				wx.vibrateShort();
				this.fxtitle = this.cous.name; //默认
				this.showfenxiang = true;
			},
			getKcrwInfo() {
				this.$api.post({
					url: '/yclasscoustask/schoolKcrwInfo'
				}, {
					schoolid: this.schoolid
				}).then(res => {
					//console.log(res)
					this.cous = res.info;
					this.stageList = res.list;
					this.loading = false;
				})
			},
			clickTabbar(index) {
				this.current = index
			},
			//切换班级
			changeClass(id) {
				uni.setStorageSync('classId', id)
				uni.switchTab({
					url: "/pages/home/home"
				})
			},
			goStuSort(item) {
				uni.navigateTo({
					url: '/pageHome/stuSort'
				})
			},
			goDetail(item, index) {
				uni.navigateTo({
					url: `/pageHome/chaperDetail?id=${item.id}`
				})
			},
			showClass() {
				if (this.listHeight = 'auto') {
					this.listHeight = '100rpx'
				} else {
					this.listHeight = '100rpx'
				}

			},
			showComplete(item, planid, cousid) {
				uni.navigateTo({
					url: `/team/kc/stuSort?sectionid=${item.id}&planid=${planid}&cousid=${cousid}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.main {
		height: 100%;
		position: relative;
		overflow-y: auto;
	}

	.a-title {
		padding-left: 40rpx;
		width: 540rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.chapter {
		padding: 20rpx;
	}

	.list {
		width: 450prx;
	}

	.context {
		width: 400rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.posr {
		position: relative;

		.cont-detail {
			position: absolute;
			top: 30rpx;
			right: 20rpx;
			width: 120rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			background: #F99115;
			box-shadow: 0px 2px 10rpx 0px rgba(182, 129, 39, 0.3);
			border-radius: 24rpx;
			color: #fff;
			font-size: 24rpx;
		}

		.content {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 116rpx;
			background-color: rgba(46, 50, 61, .3);

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #fff;
			}

			.zb {
				color: #fff;
				font-size: 26rpx;
			}

			.sort {
				width: 132rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: #FEAA19;
				border-radius: 24rpx;
				color: #fff;
			}
		}
	}

	.cont-top {
		background-color: #fff;
		display: flex;
		width: 100%;
		// border-bottom: 2rpx solid #F0F1F8;


		.tabbar {
			padding-left: 40rpx;
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			text-align: left;

			&.active:after {
				content: '';
				width: auto;
				width: 102rpx;
				height: 17rpx;
				background: #7C79F5;
				border-radius: 6rpx;
				display: block;
				margin-top: -32rpx;
				z-index: 111111;
			}
		}

		.cnt {
			margin-top: 20rpx;
			padding-left: 40rpx;
			height: 50rpx;
			line-height: 50rpx;
			background-color: #F4F6FA;
			color: #5F6572;
		}
	}

	.course-cont {
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0px 23px 46px 0px rgba(205, 207, 230, 0.18);
	}

	.slot-title {
		padding: 20rpx 40rpx;
		height: 100rpx;
		margin-top: 30rpx;
	}

	.index {
		font-size: 36rpx;
		color: #AEB8C;
	}

	.percent {
		color: #626BF1;
	}

	.percents {
		color: #626BF1;
	}

	.number {
		font-size: 36rpx;
		font-weight: blod;
		color: #AEB8CF;
	}

	.content {
		padding: 40rpx 0;
	}

	.tips {
		font-size: 36rpx;
		width: 100%;
		padding-left: 40rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: left;

		&:after {
			content: '';
			width: auto;
			width: 144rpx;
			height: 17rpx;
			background: #7C79F5;
			border-radius: 6rpx;
			display: block;
			margin-top: -32rpx;
			z-index: 111111;
		}
	}

	.status {
		padding: 20rpx 37rpx;
		width: 636rpx;
		height: 100rpx;
		overflow: hidden;

		.ite {
			width: 100rpx;
		}

		.class-list {
			width: 430rpx;
			flex-wrap: wrap;

			.items {
				margin: 0 10rpx 10rpx 0;
				padding: 0 5rpx;
				width: auto;
				height: 32rpx;
				line-height: 32rpx;
				background: #FFFFFF;
				border: 1rpx solid #FDE6CB;
				border-radius: 4rpx;
				color: #F99115;
				font-size: 20rpx;
			}
		}

	}

	.times {
		font-size: 26rpx;
		color: #888F9E;
		width: 360rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.fenxiang {
		position: absolute;
		right: 40rpx;
		top: 160px;
		width: 120rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background: #F99115;
		box-shadow: 0px 2px 10rpx 0px rgba(182, 129, 39, 0.3);
		border-radius: 24rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.updimg {
		padding-left: 25%;
		margin-bottom: 30px;
	}

	.confirmbtn {}

	/deep/.u-progress {
		display: none;
	}

	/deep/.u-active {
		display: none;
	}

	.loginpop {
		background: #b58927;
		color: #e2e0e0;
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 16px;
		padding-top: 10px;
	}
</style>
